<template>
  <div class="grap-containter">
    <div class="secondList">
      <div id="myChart13" :style="{width: '380px', height: '170px', left: '-9px'}"></div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  const echarts = require('echarts/lib/echarts')
  export default {
    data() {
      return {
        submitruntime: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'dynamic_half_year_ton_total',
          cid: '1'
        },
        yeartonTotal: [],
        option: {
          color: ['#47AF41'],
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            top: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              },
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#777777', // 左边线的颜色
                  width: '1' // 坐标线的宽度
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#777777', // 左边线的颜色
                  width: '1' // 坐标线的宽度
                }
              }
            }
          ],
          series: [
            {
              name: '总吨数',
              type: 'bar',
              barWidth: '60%',
              barHeight: '100%',
              data: [10, 20, 30, 40, 50, 60, 70]
            }
          ]
        },
        xData: [],
        yData: []
      }
    },
    mounted() {
      this.drawLine()
    },
    methods: {
      // 初始化七日数据
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        const myChart13 = echarts.init(document.getElementById('myChart13'))
        // 绘制图表
        this.submitruntime.cid = this.$route.query.cid
        axios.post('/equipmanage/dynamic', this.submitruntime, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.yeartonTotal = res.data.datas
          this.xData = []
          this.yData = []
          for (let i = 0; i < this.yeartonTotal.length; i++) {
            this.yData.push(this.yeartonTotal[i].Value)
            this.xData.push((this.yeartonTotal[i].Date).slice(5))
          }
          this.option.xAxis[0].data = this.xData
          this.option.series[0].data = this.yData
          myChart13.setOption(this.option) // 设置option
        })
        myChart13.setOption(this.option) // 设置option
      }
    }
  }
</script>
<style rel="stylesheet" lang="scss">
  .grap-containter{
    .secondList{
      width: 95%;
      height: 120px;
      margin-left: 2.5%;

    }
  }
</style>
